import Taro, { Component } from "@tarojs/taro";
import { View, Button, Text, Image } from "@tarojs/components";
import Head from "../../components/head";
import { AtInput, AtModal } from "taro-ui";
import { checkBankNum, saveBank,getUserInfo } from "../../actions/account";
import { connect } from "@tarojs/redux";
import "./withdrawal.less";

@connect(
  ({ account }) => ({
    ...account
  }),
  dispatch => ({
    async saveBank(params) {
      dispatch(await saveBank(params));
    },
    async getUserInfo() {
      dispatch(await getUserInfo());
    }
  })
)
class Withdrawal extends Component {
  config = {
    navigationBarTitleText: "绑定银行卡"
  };

  state = {
    showModal: false,
    rname: "",
    banknum: "",
    canbind: false,
  };

  componentWillMount() {
    const { rname, banknum } = this.props;
    if (rname !== "" && banknum !== "") {
      this.setState({
        rname,banknum
      })
    }
  }

   bindBanckAndWithdrawal() {
    const { banknum, rname, bankcode } = this.state;
    this.props.saveBank({ banknum, rname, bankcode }).then(async () => {
      await this.props.getUserInfo();
      Taro.redirectTo({
        url: "/pages/mine/complete"
      });
    });
  }

  checkBankNumber() {
    const that = this;
    const { banknum, canbind } = this.state;
    if(canbind){
      return;
    }
    if (banknum === "") {
      Taro.showToast({
        title: "请输入银行卡号!",
        icon: "none",
        duration: 2000
      });
      return false;
    }
    this.setState({
      canbind:true
    })
    checkBankNum({ banknum }).then(result => {
      if (result.state === "000") {
        this.setState({
          showModal: true,
          canbind:false,
          bankcode: result.data.bankcode
        });
      } else {
        Taro.showToast({
          title: result.msg,
          icon: "none",
          success() {
            that.setState(
              {
                canbind:false,
              }
            );
          }
        });

      }
    });
  }

  render() {
    const modalDoc = (
      <View className="modal-index">
        <View className="user-info">
          <Text style="margin-left:15px;">姓名：{this.state.rname}</Text>
          <Text style="margin-left:15px;margin-top:10px;">
            银行卡号：{this.state.banknum}
          </Text>
        </View>
        <View className="prompt-info">
          请再次确认您将绑定银行卡的信息，确认无误后点击下方按钮，绑定并提现
        </View>
        <Button
          className="binding-btn"
          onClick={this.bindBanckAndWithdrawal.bind(this)}
        >
          绑定并提现
        </Button>
      </View>
    );

    return (
      <View className="withdrawal-index">
        <Head title="绑定银行卡" urlPath={"/pages/mine/index"} />
        <View className="withdrawal-body">
          <View className="withdrawal-info">
            <View className="img">
              <Image
                style="width:18px;height:18px;"
                src={require("../../assets/img/warning.png")}
              />
            </View>
            <View className="font">
              请绑定您的默认提现银行卡账户，下次提现时将默认将款项打到您此张银行卡中
            </View>
          </View>
          <View className="withdrawal-divider-line" />
          <View className="user-bank-info">
            <AtInput
              name="rname"
              title="姓名"
              type="text"
              maxLength="4"
              placeholder="请输入您的真实姓名"
              value={this.state.rname}
              onChange={value => {
                this.setState({
                  rname: value
                });
              }}
            />

            <AtInput
              name="banknum"
              title="银行卡号"
              type="text"
              placeholder="请输入正确的银行卡号"
              value={this.state.banknum}
              onChange={value => {
                this.setState({
                  banknum: value
                });
              }}
            />
            <Button
              className="binding-btn"
              type="parimary"
              onClick={this.checkBankNumber.bind(this)}
            >
              绑定
            </Button>
          </View>
        </View>
        <AtModal
          isOpened={this.state.showModal}
          title="银行卡确认"
          content={modalDoc}
        />
      </View>
    );
  }
}
export default Withdrawal;
